/*
* Created on Tue Jun 13 2023 by Admin
*
* Copyright (c) 2023 shuangdi
*
* description: attributePanel
*
* date: 2025/3/11
*/
<template>
  <div class="root_pane" ref="rootPane">
    <div class="header">
      <p class="title">元素属性面板</p>
      <p class="close" @click="closeModel">
        <CloseOutlined/>
      </p>
    </div>
    <div class="content_box">
      <div class="line_row">
        <p class="title">节点类型：</p>
        <el-input v-model="formState.nodeType" :placeholder="formState.nodeType"/>
      </div>
      <div class="line_row">
        <p class="title">节点颜色：</p>
        <el-color-picker v-model="formState.nodeColor"/>
      </div>
      <div class="attributeBox">
        <div class="s_attribute_box">
          <p class="title">元素属性：</p>
          <div class="input_box">
            <div v-for="item in formState.attributeList" class="line_row_input">
              <el-input v-model="item.value"
                        class="line_input"
                        :placeholder="item.value">
              </el-input>
              <div class="delete_btn" @click="deleteData(item)">
                <el-icon>
                  <Delete/>
                </el-icon>
              </div>
            </div>
          </div>
        </div>
        <div class="add_btn" @click="addAttributeData">添加属性</div>
      </div>
    </div>
    <div class="save_btn">
      <el-button @click="saveData" type="primary">保存</el-button>
    </div>
  </div>
</template>

<script setup>
import {reactive, ref} from "vue";
import {CloseOutlined} from '@ant-design/icons-vue'
import {ElMessage} from "element-plus";
import {Delete} from "@element-plus/icons-vue";

const emit = defineEmits(['saveData'])
// 面板dom
let rootPane = ref(null)
// 表单数据
let formState = reactive({
  nodeColor: '#4c48fb',
  nodeType: '',
  attributeList: [
    {attributeValue: "", id: 1}
  ]
})

//  添加属性
function addAttributeData() {
  if (formState.attributeList.length >= 5) {
    return ElMessage.error('最多添加5个属性')
  }
  formState.attributeList.push({
    attributeValue: "",
    id: formState.attributeList.length + 1
  })
}

// 关闭面板
function closeModel() {
  rootPane.value.style.visibility = 'hidden'
}

// 保存节点属性
function saveData() {
  emit('saveData', formState)
}

// 重置元素属性面板
function resetFormState() {
  formState.nodeColor = '#4c48fb'
  formState.nodeType = ''
}

// 删除数据
function deleteData(item) {
  formState.attributeList = formState.attributeList.filter(v => v.id !== item.id)
}

// 设置元素属性
function settingAttribute(data) {
  formState.nodeType = data.nodeType
  formState.nodeColor = data.nodeColor
  formState.attributeList = data.attributeList || [
    {attributeValue: "", id: 1}
  ]
}

defineExpose({resetFormState, settingAttribute})
</script>

<style scoped lang="less">
p {
  margin: 0;
}

.root_pane {
  width: 400px;
  height: 700px;
  background: #ffffff;
  box-shadow: 0 0 10px 5px rgba(0, 0, 0, 0.1);
  position: absolute;
  top: 20px;
  left: 20px;
  padding: 10px;
  z-index: 4;
  visibility: hidden;

  .header {
    display: flex;
    justify-content: space-between;
    height: 30px;
    align-items: flex-start;

    .title {
      font-size: 18px;
      font-weight: bolder;
    }

    .close {
      cursor: pointer;

      &:hover {
        color: red;
      }
    }
  }


  .content_box {
    height: calc(100% - 70px);
    width: 100%;
    background: #efeeee;
    padding: 10px;
    box-sizing: border-box;

    .title {
      width: 100px;
      text-align: right;
    }

    :deep(.el-color-picker) {
      width: calc(100% - 100px);

      .el-color-picker__trigger {
        width: 100%;
      }
    }

    .attributeBox {
      width: 100%;
      height: 100%;

      .s_attribute_box {
        display: flex;
        margin-bottom: 10px;

        .input_box {
          width: calc(100% - 100px);

          .line_row_input {
            height: 36px;
            margin-bottom: 10px;
            display: flex;
            align-items: center;

            .delete_btn {
              width: 40px;
              text-align: center;
              cursor: pointer;
            }
          }
        }
      }

      .add_btn {
        width: 100%;
        height: 30px;
        line-height: 30px;
        text-align: center;
        color: #1463b7;
        border: 1px solid currentColor;
        cursor: pointer;
        border-radius: 5px;

        &:hover {
          color: #a19e9e;
        }
      }
    }

    .line_row {
      height: 40px;
      margin-bottom: 10px;
      display: flex;
      align-items: center;

      .el-input {
        width: calc(100% - 100px);
      }
    }
  }

  .save_btn {
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
    width: 100%;
    height: 40px;
  }
}
</style>
